<template>
  <div class="login">
    <div class="main_bar">
      <div class="logon_top_box">
          <img class="login_logo" src="@/assets/images/avatar.jpg" alt="">
          <div class="lotitle">产品认知中心</div>
          <span class="lospan">CUSTOMER CENTER</span>
      </div>
    
      <div class="login_form">
        <div class="lofbox">
          <van-form @submit="onSubmit">
            <van-field
              v-model="form.username"
              name="用户名"
              label="用户名"
              placeholder="用户名"
              :rules="[{ required: true, message: '请填写用户名' }]"
            />
            <van-field
              v-model="form.password"
              type="password"
              name="密码"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
            />
           <!-- <van-field
              v-model="sms"
              center
              clearable
              label="验证码"
              placeholder="请输入验证码"
            >
              <template #button>
                <van-button size="small" type="primary">验证码</van-button>
              </template>
            </van-field> -->
            <div style="margin-top: 20px;">
              <van-button round block type="primary" native-type="submit">
                登录
              </van-button>
            </div>
          </van-form>

        </div>
     
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "HOME",

  setup() {
    const router = useRouter()
     const form = reactive({
      username: "",
      password:""
      });
    const username="";
    const password="";
  

    const img=""
    const onSubmit = () => {
      router.push("/");
    }


    return{
      form,
      img,
      onSubmit
    }
   
  }

});
</script>
<style lang="scss" scoped>
@import "@assets/style/mixin.scss";
.login {
  width: 100%;
  height: 100%;
  position:absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(180deg, #284BC6 0%, #1386EA 77%);
  .main_bar{
    padding-top: 44px;
    .logon_top_box{
      margin:36px auto;
      text-align: center;
      .login_logo{
        width: 68.6px;
        height: 68.6px; 
        margin-bottom: 8px;
      }
      .lotitle{
        font-size: 20px;
        color: #fff;
        line-height: 38.7px;
      }
      .lospan{
        font-size: 14px;
        color: #A6C2D8;
      }
    }
    .login_form {
      margin: auto;
      width: 300px;
      height: 290px;
      background: #fff;
      border-radius: 15px;
      .lofbox{
        padding:40px  10px;
      }
      
    }
  }
  
}
</style>
